<html>
<head>
<title>Demo</title>
<style type="text/css">
div#wn	{ 
    position:relative; 
    width:150px; height:150px; 
    overflow:hidden;	
    }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">
function init_dw_Scroll() {
    // arguments: id of div container, id of div to scroll
    var wndo = new dw_scrollObj('wn', 'lyr1');
    wndo.setUpScrollControls('scroll_links');
}

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

</script>
</head>
<body>

<h1>Vertical Glide OnClick Scrolling</h1>

<div id="wn"> <!-- scroll container -->
  
	<div id="lyr1">
        <div><img src="images/demo/sunset.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/cave-art.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/swans.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/design1.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/mandala2.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/turtle.gif" width="150" height="150" alt="" /></div>
        <div><img src="images/demo/mandala1.gif" width="150" height="150" alt="" /></div>
	</div>  
	
</div>  <!-- end scroll container  -->

<div id="scroll_links">
<!-- Border attribute placed here to minimize support questions on the subject.
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
    <a class="click_up_by_150" href="#" title="Click to scroll"><img src="images/aro-up.gif" width="11" height="18" alt="" border="0"></a>
    <a class="click_down_by_150" href="#" title="Click to scroll"><img src="images/aro-dn.gif" width="11" height="18" alt="" border="0"></a>

</div>

<p>Back to <a href="index.html">index</a></p>

</body>
</html>
